<template>
	<view class="wlxx">
		<view v-for="(item,index) in  list" :key="index" class="wlxxbox">
			<view class="itembox">
				<view class="itembox_center">
					<view class="spinfo" v-for="ite in  item.items" :key="ite.id" v-if="item.items">
						<image :src="_static(ite.goods_image)" mode=""></image>
						<view class="text1">
							<view class="l1">
								<view class="bt1">{{ite.goods_title}}</view>
							</view>
							<view class="l2">
								{{ite.goods_subtitle}}
							</view>
							<view class="yajinbox" v-if="ite.goods_sku_text">
								<span v-if="skufun(ite.goods_sku_text).length>1"><span
										style="font-size: 24rpx;color: #7F7F7F;">{{skufun(ite.goods_sku_text)[0]}} |
										{{skufun(ite.goods_sku_text)[1]}}</span></span>
								<span v-else><span
										style="font-size: 24rpx;color: #7F7F7F;">{{skufun(ite.goods_sku_text)[0]}}</span></span>
							</view>
							<view class="yajinbox">
								<span>x{{ite.goods_num}}</span>
								<view class="tihuofs">
									￥{{ite.goods_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<zfl-logistics :list="item['logs']"></zfl-logistics>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	import {
		_static
	} from '@/ulm/utils/url.js'
	import zflLogistics from '@/uni_modules/zfl-logistics/components/zfl-logistics/zfl-logistics.vue'
	import {
		ref
	} from 'vue'
	const list = ref([])
	onLoad((opt) => {
		init(opt.id)
	})
	async function init(order_id) {
		const res = await $api.expresslook({
			order_id
		})
		if (res.code == 1) {
			list.value = res.data
			console.log(list.value, 'listlistlistlistlistlistlistlist');
		}
	}

	function skufun(str) {
		if (!str) {
			return []
		}
		return str.split(',')
	}
</script>

<style lang="scss">
	.wlxx {
		width: 100%;
		overflow: hidden;

		.wlxxbox {
			margin-bottom: 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.itembox {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.18);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 28rpx;
			overflow: hidden;
			padding: 30rpx 0;

			&_center {
				width: 630rpx;
				margin: auto;
				overflow: hidden;

				.spinfo {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;

					image {
						width: 156rpx;
						height: 156rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}

					.text1 {
						width: 452rpx;
						margin-left: 16rpx;
						overflow: hidden;

						.l1 {
							display: flex;
							align-items: center;
							width: 100%;

							.bt1 {
								width: 80%;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
							}

							.bs {
								width: 64rpx;
								height: 40rpx;
								background: #FFEFDE;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								text-align: center;
								line-height: 40rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #A46F3A;
							}

							.box {
								width: 48rpx;
								height: 32rpx;
								background: #7EBC79;
								border-radius: 4rpx 16rpx 4rpx 16rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 32rpx;
								margin-right: 8rpx;
							}
						}

						.l2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7F7F7F;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
							margin-top: 18rpx;
							width: 408rpx;
						}

						.yajinbox {
							display: flex;
							align-items: center;
							margin-top: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7F7F7F;
							justify-content: space-between;

							.tihuofs {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #F53F3F;
							}
						}
					}
				}

			}
		}
	}
</style>